<template>
  <transition name="fade-to-top">
    <div class="as-dialog"
         :style="{zIndex:appendToBody?'3000':'2000'}"
         custom-class="class1"
         ref="dialog"
         v-show="visible">
      <div class="as-dialog__content"
           :style="{width}">
        <div class="as-dialog__header">
          <span class="as-dialog__header_title">
            <span v-if="!$slots.header">{{title}}</span>
            <slot name="header"
                  v-else></slot>
          </span>
          <i class="el-icon-close as-dialog__header_close"
             @click="$emit('update:visible',false)"></i>
        </div>
        <div class="as-dialog__body">
          <slot></slot>
        </div>
        <div class="as-dialog__footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
export default {
  name: "AsDialog",
  props: {
    visible: Boolean,
    title: {
      type: String,
      default: "标题"
    },
    width: {},
    appendToBody: Boolean,
    closeOnClickModal: {
      type: Boolean,
      default: true
    }
  },
  destroyed() {
    window.removeEventListener("click", this.clickEvent);
  },
  mounted() {
    window.addEventListener("click", this.clickEvent);
  },
  data() {
    return {
      clickEvent: e => {
        if (
          this.$refs.dialog === e.target &&
          this.closeOnClickModal &&
          this.closeOnClickModal !== "false"
        ) {
          this.$emit("update:visible", false);
        }
      }
    };
  }
};
</script>
